<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const echartsData = [
  { value: 130, name: "以就业48.64" },
  { value: 80, name: "未就业27.05" },
  { value: 20, name: "返校未就业8.77" },
  { value: 30, name: "以往未就业9.77" },
  { value: 30, name: "返校重听9.77" },
];
const colorList = [
  "#FF8F8F",
  "#FF9D83",
  "#FFBC80",
  "#FFEC9C",
  "#E5FF9C",
  "#A9FFA9",
  "#8AF9C3",
  "#99FFF3",
  "#82F9F6",
  "#80EDFF",
  "#79D9F7",
  "#7AC2F9",
  "#A4A4FE",
  "#B8B8FF",
  "#CDB3FF",
  "#FFB3F4",
  "#FFA9D4",
  "#FFBOBO",
  "#FFBCA4",
  "#FFD6A9",
  "#FFF3C0",
  "#E9FFC2",
  "#COFFC6",
  "#AAF7D6",
  "#ABFFF9",
  "#A0F5F9",
  "#A1E9FF",
  "#9ADBFC",
  "#9BC8F9",
  "#B3B3FF",
  "#C2C2FF",
  "#E4C5FF",
  "#FFCCF3",
  "#FFC2DB",
  "#FFDCDC",
  "#FFE4DC",
  "#FFEDDC",
  "#FCF7E0",
  "#F6FFE1",
  "#E1FFE3",
  "#D4FCE7",
  "#D2FFFA",
  "#COFFFF",
  "#BDF3FF",
  "#C5ECFF",
  "#BBE2F9",
  "#D2D2FF",
  "#DCDCFF",
  "#E3D2FF",
  "#FFDEFC",
  "#FFD4EE",
];
var option = ref({
  color: colorList,
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["30%", "90%"],
      center: ["50%", "50%"],
      roseType: "radius",
      label: {
        show: true,
        position: "outside",
        fontSize: 16,
        formatter: (params) => {
          return `{a|${params.name}}`;
        },
        rich: {
          a: {
            align: "left",
            fontSize: 12,
          },
        },
      },
      labelLine: {
        length: 10,
        length2: 30,
      },
      data: echartsData.map((item, index) => {
        return {
          ...item,
          label: {
            color: colorList[index],
          },
        };
      }),
    },
  ],
});
let warp = ref("");
let myChart
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
 
});
window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%;margin-top: 0.5rem;"></div>
</template>

<style>

</style>